<template>
  <div class="scroll-wrapper">
    <van-pull-refresh v-model="isLoadingNewArticle" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        loading-text="加载中"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
          v-for="item in list"
          :key="item.art_id.toString()"
          :title="item.title"
          @click="$router.push('/detail/' + item.art_id.toString())"
        >
          <div slot="label" v-if="item.cover.images">
            <van-grid :border="false" :column-num="item.cover.images.length">
              <van-grid-item v-for="(img, idx) in item.cover.images" :key="idx">
                <van-image :src="img" />
              </van-grid-item>
            </van-grid>
            <!-- 文字说明 -->
            <div class="meta">
              <span>{{ item.aut_name }}</span>
              <span>{{ item.comm_count }}评论</span>
              <span>{{ item.pubdate | findTime }}</span>
              <span class="close" @click.stop="hShowMoreAction(item)">
                <van-icon name="cross"></van-icon>
              </span>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
    <!-- 弹窗 -->
    <van-popup v-model="isShowMoreAction" :style="{ width: '80%' }">
      <!-- 2在父组件中监听 -->
      <more-action
        ref="moreAction"
        @report="hReport"
        @hate="hHate"
        @block="block"
      ></more-action>
    </van-popup>
  </div>
</template>

<script>
import { dislike, getArticles, report } from '../../../api/articles'
import { block } from '../../../api/user'
import MoreAction from './moreAction.vue'
export default {
  name: 'ArticleList',
  props: ['channel'], // 接收当前父组件的频道
  components: {
    MoreAction
  },
  data () {
    return {
      isLoadingNewArticle: false, // 下拉刷新
      list: [], // 渲染列表的数据
      loading: false, // loading加载属性
      finished: false, // 是否加载结束
      timestamp: null, // 时间戳
      isShowMoreAction: false // 文章弹窗
    }
  },
  methods: {
    // 下拉发起数据请求
    async onRefresh () {
      // console.log('下拉刷新')
      // 1. 重发请求，取最新的数据
      const result = await getArticles(this.channel.id, Date.now())
      // 2. 放在list的最前面（数组的头部）
      const arr = result.data.data.results
      this.list.unshift(...arr) // 在列表前加上新增的数据

      // 3. 结束loading: isLoadingNew=false
      this.isLoadingNewArticle = false
      // 4. 提示
      this.$toast(arr.length === 0 ? '暂无新数据' : `已更新${arr.length}条数据`)
    },
    delArticle (articleId) {
      // 检查频道id
      // 去在当前的文章列表中搜索是否有 编号是articleId的文章，
      //  1. findIndex会找出下标，如果找不到，返回-1
      const idx = this.list.findIndex(item => {
        return item.art_id.toString() === articleId
      })
      if (idx !== -1) {
        // 如果找到就删除
        this.list.splice(idx, 1)
        this.$toast('已收到反馈')
      }
    },
    async onLoad () {
      // console.log('11111')
      // console.log(this.channel.id)
      // 判断当前是有有时间戳，如果没有则添加时间戳
      try {
        if (!this.timestamp) {
          this.timestamp = Date.now()
        }
        const res = await getArticles(this.channel.id, this.timestamp)
        console.log(res)
        // 保存本次请求回来的数据中携带的时间戳
        this.timestamp = res.data.data.pre_timestamp
        // 保存请求的数据
        const dataArr = res.data.data.results
        // 2. 把数据添加到list中去，默认添加10条
        this.list.push(...dataArr)
        // 关闭加载状态
        this.loading = false
        // 数据加载完毕
        if (dataArr.length === 0) {
          this.finished = true
        }
      } catch (error) {}
    },
    // 用户在某文章上点击关闭按钮
    hShowMoreAction (article) {
      // 1显示更多操作的弹层
      this.isShowMoreAction = true
      // 2记下当前被操作的文章编号
      this.articleId = article.art_id.toString()
      // article.art_id可能是一个Bigint对象，所以用toString()转成字符串
      // 第一次打开弹层时，子组件并没有被创建出来，所以这里要先判断一下
      // 注意引入子组件的名字写对了！
      if (this.$refs.moreAction) {
        // 3把子组件MoreAction中的isReport改成false
        // 用ref获取子组件的引用，然后通过引用来修改子组件的数据
        this.$refs.moreAction.isReport = false
      }
    },
    async hHate () {
      try {
        // 1传文章编号
        await dislike(this.articleId)
        // 2删文章,根据文章的编号在list中删除
        this.delArticle(this.articleId)
        this.$toast.success('屏蔽成功')
        // 3关弹层
        this.isShowMoreAction = false
      } catch (err) {
        this.$toast.fail('屏蔽失败')
      }
    },
    async hReport (reportTypeId) {
      console.log('收到的举报类型是', reportTypeId)
      // 1发请求举报,await后边是发请求，传入俩参数
      try {
        // 1传文章编号和举报类型
        await report(this.articleId, reportTypeId)
        this.$toast.success('已举报，为您屏蔽此文章')
        // 删文章和关闭弹层要放在try内，发请求失败，则不执行！
        // 2删文章,根据文章的编号在list中删除
        this.delArticle(this.articleId)
        // 3关弹层
        this.isShowMoreAction = false
      } catch (err) {
        this.$toast.fail('举报失败')
      }
    },
    async block () {
      const id = this.list[0].aut_id
      // console.log(id)
      await block(id)
      this.$toast.success('已成功拉黑作者')
      this.isShowMoreAction = false
    }
  }
}
</script>

<style scoped lang="less">
.meta {
  display: flex;
  span {
    margin-right: 10px;
  }
  .close {
    // 让它在最右边
    // 它的父级容器是flex的，给当前元素设置左外边距为auto，会让这个元素在父级容器
    // 的最右边
    margin-left: auto;
  }
}
</style>
